<template>
	<view class="tbody">
		<view v-for="(item,index) in formdate" :key="index" @click="navigator(item.id)">
			<view class="articleBox" style="position: relative;">
				<image :src="URL + item.coverImage" mode="" class="articleBox-image" />
				<view class="articleBox-box">
					<!-- 标题 -->
					<view class="headline">
						{{item.title}}
					</view>
					<!-- 文章内容 -->
					<text class="text">
						{{item.introduce}}
					</text>
					<!-- 学习人数 时间 -->
					<view class="state">
						<!-- 学习人数 -->
						<view class="state-left">
							
						</view>
						<view class="state-right">
							<!-- 发布人 -->
							<view class="state-right-one">
								<image src="../../static/images/我的@2x.png" mode="" />
								<text class="state-right-one-name"
									style="margin-right: 20rpx;">{{item.createName}}</text>
							</view>
							<!-- 时间 -->
							<view class="state-right-one">
								<image src="../../static/images/时间@2x.png" mode="" style="margin-right: 6rpx;"></image>
								<text class="state-right-one-name">{{item.publishTime}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="image" v-show="!keybl">
					<!-- 0未参加 -->
					<image v-if="item.activeState === '0'"
						src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/wcj.png" mode="" class="">
					</image>
					<!-- 1申请中 -->
					<image v-if="item.activeState === '1'"
						src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/shz.png" mode="" class="">
					</image>
					<!-- 2已参加 -->
					<image v-if="item.activeState === '2'"
						src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/ycj.png" mode="" class="">
					</image>
					<!-- 3已驳回 -->
					<image v-if="item.activeState === '3'"
						src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/ybh.png" mode="" class="">
					</image>
					<!-- 4已结束 -->
					<image v-if="item.state === '2'"
						src="/static/images/已结束@2x.png" mode="" class="">
					</image>
				</view>
				<view class="image" v-show="keybl">
					<!-- 管理员0是未发布 -->
					<image v-if="item.state==='0'"
						src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/wfb.png" mode="" class="">
					</image>
					<!-- 1是发布了 -->
					<image v-else="item.state==='1'"
						src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/yfb.png" mode="" class="">
					</image>
				</view>

			</view>
		</view>

		<!-- 添加盒子 -->
		<view class="add" v-show="keybl">
			<view class="add-y">
				<view  @click="addY">
					<image src="https://www.anhuimiller.com:441/profile/upload/appimg/status_icon/jiahao.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				key: uni.getStorageSync('roleKey'),
				URL: this.$store.state.user.URL,
				formdate: [],
				// 本页共有几条数据
				total: 10,
				page_data: {
					pageNum: 1,
					pageSize: 10
				}
			};
		},
		computed: {
			// 判断是不是管理员，是管理员就返回一个true，不是就返回一个false
			keybl() {
				if (this.key === 'manager') {
					return true
				} else {
					return false
				}
			}
		},
		onShow() {
			this.formdate = []
			if (this.keybl) {
				//是管理员调用全部状态的接口
				this.getbusinesscontent('/business/content/list')
			} else {
				//不是管理员调用只能看到发布过的学习的接口
				this.getbusinesscontent('/business/content/publishList')
			}
		},
		methods: {
			addY(){
				uni.navigateTo({
					url:'/pages/activity/addActivity/addActivity'
				})
				this.formdate = []
			},
			// 下拉刷新
			onPullDownRefresh() {
				// 调用获取数据的方法
				if (this.keybl) {
					//是管理员调用全部状态的接口
					this.getAppealPage('/business/content/list')
				} else {
					this.getAppealPage('/business/content/publishList')
				}
				setTimeout(() => {
					// 结束下拉刷新
					uni.stopPullDownRefresh();
				}, 1000)
			},
			// 上拉加载
			onReachBottom() {
				//触发了上拉加载，请求下一页（10）条数据
				let allTotal = this.page_data.pageNum * this.page_data.pageSize
				if (allTotal < this.total) {
					// 判断当前条数小于总条数
					if (this.keybl) {
						//是管理员调用全部状态的接口
						this.page_data.pageNum++
						this.getbusinesscontent('/business/content/list')
					} else {
						this.page_data.pageNum++
						this.getbusinesscontent('/business/content/publishList')
					}
				} else {
					uni.showToast({
						title: '已加载全部数据',
						icon: 'none'
					})
				}

			},
			// 获取活动内容列表数据
			async getbusinesscontent(url) {
				const res = await uni.$http.get(url, {
					params: this.page_data
				})
				res.data.rows.forEach((item, index) => {
					item.particulars = item.particulars.replace(/<\/p><p>/g, "   "); // 每段p标签中间加段空格
					item.introduce = item.introduce.replace(/<[^>]*>/g, "");
					this.formdate.push(item) 
				})	
				this.total = res.data.total
			},
			// 下拉刷新
			async getAppealPage(url) {
				this.page_data = {
					pageNum: 1,
					pageSize: 10
				}
				const res = await uni.$http.get(url, {
					params: this.page_data
				})
				this.formdate = []
				this.formdate = res.data.rows
				for (let i = 0; i < this.formdate.length; i++) {
				  this.formdate[i].particulars = this.formdate[i].particulars.replace(/<\/p><p>/g, "   ");// 每段p标签中间加段空格
				  this.formdate[i].introduce = this.formdate[i].introduce.replace(/<[^>]*>/g, "");
				}
				
			},
			// 跳转去活动详情
			navigator(id) {
				uni.navigateTo({
					url: `/pages/activityDetails/activityDetails?id=${id}`
				})
				this.formdate = []
			}
		}
	}
</script>

<style lang="scss">
	.add {
		position: fixed;
		width: 750rpx;
		left: 0;
		bottom: 0;
		height: 96rpx;
		background: rgba(235, 252, 255, 1);
		box-shadow: 0px -1px 2px 0px rgba(22, 193, 219, 0.1);

		.add-y {
			box-sizing: border-box;
			width: 112rpx;
			height: 112rpx;
			border-radius: 30px;
			background: rgba(22, 193, 219, 1);
			box-shadow: 0px 0px 0px 0px rgba(22, 193, 219, 0.2), 0px 1px 2px 0px rgba(22, 193, 219, 0.2), 0px 3px 3px 0px rgba(22, 193, 219, 0.17), 0px 7px 4px 0px rgba(22, 193, 219, 0.1), 0px 13px 5px 0px rgba(22, 193, 219, 0.03), 0px 20px 5px 0px rgba(22, 193, 219, 0);
			margin: 0 auto;
			transform: translate(0, -44rpx);
			text-align: center;
			padding: 24rpx;

			image {
				width: 64rpx;
				height: 64rpx;
				color: rgba(235, 252, 255, 1);
			}
		}
	}

	.image {
		position: absolute;
		top: -2rpx;
		right: 0rpx;
		image{
			width: 80rpx;
			height: 32rpx;
		}
	}
</style>
